<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('渣土车实时监控')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: gd-map-js"/>
    <th:block th:include="include :: gd-ui-js"/>
    <style>
        /*地图 start*/
        #container {
            width: 100%;
            height: 100%;
        }
        #content-main {
            height: calc(100% - 127px);
            overflow: hidden;
        }
        .amap-logo{
            display: none !important;
        }
        .amap-copyright{
            opacity:0;
        }
        /*地图 end*/

        /*自定义窗体 start*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: 330px;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }


        .autoHeight{height:auto!important;min-height:0px;height:0px;}
        .autoHeight:after{display:block;clear:both;content:".";visibility:hidden;height:0;}
        .clum{
            line-height: 22px;
        }
        .clum p{
            height: auto;
            margin-bottom: 0;
        }
        .title_n{
            width: 68px;
            float: left;
            height: 22px;
            text-align: right;
        }
        .con_n{
            margin-left:70px;
            text-align: left;
        }
        .con_n_s{
            padding-left: 10px;
        }
        .btnClum{
            height: 40px;
            border-top: 1px solid #ccc;
            margin-top: 10px;
        }
        .btnClum a{
            display: block;
            width: 25%;
            float: left;
            text-align: center;
            line-height: 40px;
            font-weight: bold;

        }
        .wid{
            width: 50%;
            float: left;
        }
        /*自定义窗体 end*/


        /*选项卡样式 start*/
        .panel-heading{
            padding: 5px;
        }
        .nav-tabs{
            display: flex;
            justify-content: space-between;
        }
        .nav-tabs>li>a{
            padding: 10px 20px 10px 20px;
        }
        /*选项卡样式 end*/

        /*报警按钮样式 start*/
        .view-card{
            position: relative;
            z-index: 999;
            float: right;
            box-shadow: 0 0 5px 5px rgba(0,0,0,.2);
            background: rgba(255,255,255,.8);
            border-radius: 8px;
            padding: 10px;
            margin-top: 20px;
        }
        .view-card div{
            margin-top: 10px;
            width: 136px;
        }
        .view-card div button{
            width: 136px;
        }
        .cd-dsz{
            overflow: auto;
            overflow-y: hidden;
            height: 50px;
        }
        .cd-dsz img{
            width: 45px;
            float: left;
            vertical-align: middle;
        }
        .cd-xsz{
            float: left;
            line-height: 50px;
            color: #ed5565;
        }
        /*报警按钮样式 end*/

        /* 表格列样式 start*/
/*

        table {
            table-layout:fixed;
        }
        table td{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
*/
        table {
            table-layout:fixed;
        }
        .omd{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        /* 表格列样式 end*/

        /* 弹窗图片居中 start*/
        .layui-layer-title{
            text-align: center;
            padding: 0 ;
        }
        .layui-layer-content{
            text-align:center;
        }
        /* fse选择栏样式 */
        .fseSel{
            display: block;
            padding-left: 25px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: 600;
            color: #53535F;
        }
        /*.fseSel :hover{ color:#5073CB}*/
        /*.fixed-table-container tbody .selected td{background-color:#EEE8AA !important;}*/
    </style>
</head>
<body class="gray-bg" >
<div class="ui-layout-west">
    <div class="box box-main">

        <div class="panel-heading">
            <div class="panel-options">
                <ul class="nav nav-tabs">
                        <li class="chaid active" id="on_tab"><a data-toggle="tab" onclick="onlineStatus('on')" title="FSE实时查询">FSE实时查询<!--<span id="onlineSum">0</span>--></a></li>
                        <!--<li class="chaid active" id="off_tab"><a data-toggle="tab" onclick="onlineStatus('off')" title="离线 0辆"><i class="fa fa-truck" style="padding-right: 5px;"></i><span id="offlineSum">0</span></a></li>-->
                </ul>
            </div>
        </div>
        <div class="panel-heading">
            <form id="formId">
                <input type="hidden" th:value="${tlId}" id="con_tlId">
                <input type="hidden" th:value="${fseId}" id="con_fseId">
                <input type="hidden" th:value="${roleId}" id="con_roleId">

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="buName" name="bu" maxlength="10" placeholder="请输入BU" onchange="buChange();"/>
                <input type="text" id="bu" hidden/>
                <input type="text" id="buStr" hidden/>

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="teamleaderName" maxlength="10" placeholder="请输入TL" onchange="teamleaderChange();" name="teamleaderName"/>
                <input type="text" id="teamleaderId"  hidden/><!--name="teamleaderId"-->
                <input type="text" id="teamleaderStr" hidden/>

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="enginnerName" maxlength="10" placeholder="请输入FSE" name="enginnerName"/>
                <input type="text" id="enginnerId"  hidden/> <!--name="enginnerId"-->
                <input type="text" id="enginnerStr" hidden/>
                <!--导出实时查询按钮-->
                <a class="btn btn-warning btn-rounded btn-sm" style="float: right; margin-top: 6px;"  onclick="$.table.exportExcel()" >
                    <i class="fa fa-download"></i> 导出
                </a>
                <a id="goSearch" style="float: right; margin-top: 6px;" class="btn btn-primary btn-rounded btn-sm" onclick="getFseLocation()"><i class="fa fa-search"></i>&nbsp;搜索</a>
            </form>
        </div>
        <div class="ui-layout-content" id="fseList">
            <!--<a href="javascript:;" onclick="selectFse(1);" class="fseSel"><input type="hidden" class="fseId" value="1"><P >张大</P></a>-->
            <!--<a href="javascript:;" onclick="selectFse(2);" class="fseSel"><input type="hidden" class="fseId" value="2"><P >张二</P></a>-->
            <!--<a href="javascript:;" onclick="selectFse(3);" class="fseSel"><input type="hidden" class="fseId" value="3"><P >张三</P></a>-->
            <!--<a href="javascript:;" onclick="selectFse(4);" class="fseSel"><input type="hidden" class="fseId" value="4"><P >张四</P></a>-->
        </div>
    </div>
</div>

<div class="ui-layout-center" style="overflow-y: auto;">
    <!--地图-->
    <div class="container-div map" tabindex="0" id="container" >

    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: bootstrap-suggest-js" />
<th:block th:include="include :: bootstrap-typeahead-js" />
<script th:src="@{/js/fsepc/bu_tl_fse.js}"></script>
<script th:inline="javascript">
    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        top.setAttribute("style","display:block")
        var titleD = document.createElement("div");
        titleD .setAttribute("style","display:block")
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
</script>

<script th:inline="javascript">
    var prefix = ctx + "fse/location";
    // 集群,点标记(多个)
    var cluster, markers = [];
    // 车辆标记
    var marker = [];
    // 创建地图实例
    var map = new AMap.Map("container", {
        //showLabel: false,
        resizeEnable: true,
        center: [121.473658,31.230378],
        zoom: 15
    });

    // 初始化
    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        // 查询位置
        getFseLocation();

        /*  实时位置导出*/
        var options = {
            url: prefix+ "/getFseLocation",
            exportUrl: prefix+ "/exportByRole",
            modalName: "工程师实时位置",
        };
        $.table.init(options);
    })

    // 点击左侧FSE
    function selectFse(id) {
        $(".fseSel").each(function(i,e){
            var fseId = $(this).find("input").val();
            if (id == fseId) {
                $(this).css("backgroundColor", "#6495ED");
                $(this).css("color", "#fff");
            } else {
                $(this).css("backgroundColor", "#fff");
                $(this).css("color", "#495057");
            }
        });
        var ogj;
        $.ajax({
            type: "POST",
            url:  ctx + "fse/location/listByFseId",
            data: {
                "fseId" : id
            },
            async:false,
            dataType: 'json',
            success: function(result) {
                // 删除标记点
                if(markers && markers.length>0) {
                    map.remove(markers);
                }
                // 删除集群
                if (cluster && cluster.length>0) {
                    map.remove(cluster);
                }
                // 清空标记点
                markers = [];

                ogj = result.data;

                var x = ogj[0].postx;
                var y = ogj[0].posty;
                var lnglat = [x,y];
                map.setZoom(14); //设置地图层级
                map.setCenter(lnglat); //设置地图中心点
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });

        // showInfoWindowFse(ogj, cluster.getMarkers()[id]);
        // console.log(ogj);
        // cluster.getMarkers()[id].emit('click',{"marker":cluster.getMarkers()[id], info:ogj});
    }

    // 查询list
    function getFseLocation(){
        // 删除标记点
        if(markers && markers.length>0) {
            map.remove(markers);
        }
        // 删除集群
        if (cluster && cluster.length>0) {
            map.remove(cluster);
        }
        // 清空标记点
        markers = [];
        // var fseName = $("#fseName").val();
        var url = ctx + "fse/location/getFseLocation";
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: {
                "bu" : $("#buName").val(),
               /* "teamleaderId" : $("#teamleaderId").val(),
                "enginnerId" : $("#enginnerId").val(),*/
                "teamleaderName" : $("#teamleaderName").val(),
                "enginnerName" : $("#enginnerName").val()
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    loadCars(result.data);
                }
            }
        };
        $.ajax(config);
    }

    // 数据解析，标点及左侧列表
    function loadCars(data){
        // console.log(JSON.stringify(data));
        var html = "";
        $.each(data,function(i,car){
            if ((!car.postx || !car.posty) && $("#con_roleId").val() != 3) {
                return true;
            }
            html += '<a href="javascript:;" onclick="selectFse('+ car.fseId +');" class="fseSel"><input type="hidden" class="fseId" value="'+ car.fseId +'"><P >'+ car.fseName +'</P></a>';

            var lnglat = [car.postx,car.posty];
            var marker = new AMap.Marker({
                position: lnglat,
                // title: car.fseName,
                extData : {
                    "carStatus": car
                },
                icon: '../../img/car.png',
                autoRotation: true,
                topWhenClick: true,
                map: map
            });
            marker.id = car.fseId;
            //点击车辆图标
            marker.on('click', markerClick);
            markers.push(marker);
        });
        //左侧列表
        $("#fseList").html(html);

        //适应窗口
        map.setFitView();

        //地图加载集群
        addCluster();
    }

    // 地图加载集群
    function addCluster(){
        if (cluster) {
            cluster.setMap(null);
        }
        cluster = new AMap.MarkerClusterer(map, markers);
        cluster.setMaxZoom(8);
        wlfMark = cluster.getMarkers()[1];
    }

    // mark点击事件处理
    function markerClick(e) {
        var info;
        if (e.target) {
            info = e.target.getExtData().carStatus;
        } else {
            info = e.extData.carStatus;
        }
        var lnglat = [info.postx,info.posty];
        showInfoWindow(e,info,info.address)
        // getAddress(lnglat).then(value => {
        //     showInfoWindow(e,info,value)
        // }).catch(reason => {
        //     //失败了
        //     showInfoWindow(e,info,reason)
        // })
    }

    // 打开标记点信息窗体
    function showInfoWindow(e, info, address) {
        //实例化信息窗体
        var mobile = info.mobile != null ? info.mobile : "";
        var content = [];
        content.push('<div class="autoHeight clum"><p class="title_n">FSE姓名：</p><p class="con_n" id="addressText">' + info.fseName + '</p></div>');
        content.push('<div class="autoHeight clum"><p class="title_n">手机号：</p><p class="con_n" id="addressText">' + mobile + '</p></div>');
        content.push('<div class="autoHeight clum"><p class="title_n">已接受：</p><p class="con_n">' + info.countState1 + '<span class="con_n_s">已签到：</span>' + info.countState2 + '<span class="con_n_s">已签离：</span>' + info.countState3 + '<span class="con_n_s">已完成：</span>' + info.countState4 + '</p></div>');
        // content.push('<div class="autoHeight clum"><p class="title_n_line">已签到：<span class="con_n_line" id="addressText">' + info.countState2 + '</span></p></div>');
        // content.push('<div class="autoHeight clum"><p class="title_n_line">已签离：<span class="con_n_line" id="addressText">' + info.countState3 + '</span></p></div>');
        // content.push('<div class="autoHeight clum"><p class="title_n_line">已完成：<span class="con_n_line" id="addressText">' + info.countState4 + '</span></p></div>');
        content.push('<div class="autoHeight clum"><p class="title_n">地理位置：</p><p class="con_n" id="addressText">' + address + '</p></div>');
        var infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: createInfoWindow("", content.join("")),
            offset: new AMap.Pixel(16, -45)
        });
        //打开自定义窗口
        infoWindow.open(map, e.target.getPosition());
    }

    // 关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
</script>

</body>
</html>